<template>
  <div>
      <div class="udlite-container partners">
            <van-cell-group>

                <van-tabs v-model="active">
                
                <van-tab title="用户名登录">
                <van-field v-model="username" label="用户名" placeholder="请输入用户名" />
                </van-tab>

                <van-tab title="手机号登录">
                <van-field v-model="phone" label="手机号" placeholder="请输入手机号" />
                </van-tab>

                <van-tab title="邮箱登录">
                <van-field v-model="email" label="邮箱" placeholder="请输入邮箱" />
                </van-tab>

                </van-tabs>

                <van-field v-model="password" label="密码" placeholder="请输入密码" />

                <!-- 滑块验证 -->
                <van-cell-group>
                    <darg-verify :width="width" :height="height" :text="text" ref="Verify">     <!-- 绑定三个变量，一个属性 -->

                    </darg-verify>
                </van-cell-group>
                
                <van-cell-group>
                  <img :src="src" @click="changecode" />

                </van-cell-group>
                <!-- 图片验证码 -->
                <van-field v-model="code" label="验证码" placeholder="请输入验证码" />


                <van-button type="primary" @click="submit">登录</van-button>
                <van-button type="info">重置</van-button>
                <van-button @click="dingding"><img src="../../static/dingding.png"></van-button>
            </van-cell-group>
        </div>
  </div>
</template>

<script>
import dargVerify from 'vue-drag-verify'    // 导入滑块儿验证码模块
export default {
  data() {
    return {
      username:'',
      phone:'',
      email:'',
      password:'',
      active: '',
      width:320,
      height:42,
      text:"请您拖动滑块",
      code:'',
      src:'http://localhost:8000/mycode/',
    }
  },

  components:{
      'dargVerify':dargVerify
  },

  created(){
      // 接收后端返回到url的参数（uid,username）
        var username = this.$route.query.username
        var uid = this.$route.query.uid
        if (username){
          localStorage.setItem('username',username)
          localStorage.setItem('uid',uid)
          this.$router.push({path:'/myhome'})
          this.$toast('登录成功')
        }
  },

  methods:{
    // 变更验证码
    changecode:function(){
      // console.log(this.src)
      var num = Math.ceil(Math.random()*10)
      
      this.src = this.src + "?num=" + num

    },
    submit:function(){
        console.log(this.$refs.Verify.isPassing)
        
        if (this.$refs.Verify.isPassing == true){
          
          this.axios.post('http://localhost:8000/login2/', this.qs.stringify({'username':this.username,'password':this.password,
          'phone':this.phone,'email':this.email,'active':this.active,'code':this.code})).then(res=>{
            console.log(res.data)
            if (res.data.code == '200'){
                this.$toast('登录成功')
                localStorage.setItem('username',res.data.username)
                localStorage.setItem('token',res.data.token)
                localStorage.setItem('uid',res.data.uid)

                this.$router.push({path:'/myindex'})
            }
            else{
                this.$toast(res.data.message)
            }
        })
      }
      else{
        alert('请通过验证')
      }
    },

    // 钉钉登录
    dingding:function(){
        window.location.href = "http://localhost:8000/ding_url/";
    }
  }
}
</script>

<style type="text/css">

img{

    cursor: pointer;

}



</style>